$(function () {
    var i = 0, t = !0, vl = 4, itemWidth = 298, total = $('.slider').children().size()
    var rightStart = (total - vl) * itemWidth
    var setLeft = 0

    total >= 8 && $('.slide-right').on('click', function (e) {
        t && (total - vl === i && ($(".slider").css({
            left: "-0px"
        }),
            i = 0),
            i++,
            t = !1,
            setLeft = "-" + itemWidth * i,
            $(".slider").animate({
                left: "-" + itemWidth * i + "px"
            }, 300, function () {
                t = !0
            })
        )
    }) &&
        $('.slide-left').on('click', function (e) {
            t && (0 === i && ($(".slider").css({
                left: '-' + rightStart + 'px'
            }),
                i = total - vl), (i--,
                    t = !1,
                    setLeft = "-" + itemWidth * i,
                    $(".slider").animate({
                        left: "-" + itemWidth * i + "px"
                    }, 300, function () {
                        t = !0
                    })
                ))
        }) && setInterval(function () {
            t && (setLeft = setLeft - 2) && $(".slider").css('left', setLeft)
            if (setLeft + rightStart == 0) {
                setLeft = 0
            }
        }, 50)
        &&
        $('.slider').hover(function (e) {
            t = e.type == 'mouseleave'
        })


})